<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>考试答题界面</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <!-- 使用与参考文件一致的资源引用方式 -->
    <link rel="stylesheet" href="../../lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="../../css/public.css" media="all">
    <link rel="stylesheet" href="../font-awesome-4.7.0/css/font-awesome.min.css">
    <style>
        /* 原有样式保留，只调整结构 */
        .mark {
            position: absolute;
            width: 4px;
            height: 4px;
            content: "";
            background-color: red;
            border-radius: 50%;
            top: 0px;
            left: 22px;
        }
        /* 其他原有样式... */
    </style>
</head>
<body>
<div class="layuimini-container">
    <div class="layuimini-main">
        <!-- 顶部信息栏 -->
        <div class="layui-card">
            <div class="layui-card-header" style="background: linear-gradient(135deg, #2776df 0%, #1e5cb3 100%);color: white;">
                <ul class="layui-nav" style="background: none;">
                    <li class="layui-nav-item">
                        <a href="javascript:;"><i class="fa fa-bars toggle-btn" id="toggleBtn"></i></a>
                    </li>
                    <li class="layui-nav-item">
                        <a href="javascript:;">正式考试-数据库系统概论</a>
                    </li>
                    <li class="layui-nav-item" style="float: right;">
                        <a href="javascript:;"><i class="fa fa-user"></i></a>
                        <dl class="layui-nav-child">
                            <dd><a>姓名：张三</a></dd>
                            <dd><a>准考证号: S20230001</a></dd>
                        </dl>
                    </li>
                </ul>
            </div>
        </div>

        <div class="layui-row layui-col-space15">
            <!-- 左侧题目编号区 -->
            <div class="layui-col-md3">
                <div class="layui-card" id="leftPanel">
                    <div class="layui-card-header">题目导航</div>
                    <div class="layui-card-body">
                        <div class="layui-collapse" lay-accordion>
                            <div class="layui-colla-item">
                                <h2 class="layui-colla-title">选择题部分</h2>
                                <div class="layui-colla-content layui-show">
                                    <div class="question-list">
                                        <!-- 选择题题号 -->
                                        <span class="layui-badge layui-bg-blue">1</span>
                                        <span class="layui-badge">2</span>
                                        <span class="layui-badge layui-bg-green">3</span>
                                        <span class="layui-badge"><span class="mark"></span>4</span>
                                        <!-- 更多题号... -->
                                    </div>
                                </div>
                            </div>
                            <div class="layui-colla-item">
                                <h2 class="layui-colla-title">填空题部分</h2>
                                <div class="layui-colla-content">
                                    <div class="question-list">
                                        <!-- 填空题题号 -->
                                        <span class="layui-badge">11</span>
                                        <span class="layui-badge">12</span>
                                        <span class="layui-badge layui-bg-green">13</span>
                                        <!-- 更多题号... -->
                                    </div>
                                </div>
                            </div>
                            <div class="layui-colla-item">
                                <h2 class="layui-colla-title">判断题部分</h2>
                                <div class="layui-colla-content">
                                    <div class="question-list">
                                        <!-- 判断题题号 -->
                                        <span class="layui-badge">16</span>
                                        <span class="layui-badge layui-bg-green">17</span>
                                        <span class="layui-badge"><span class="mark"></span>18</span>
                                        <!-- 更多题号... -->
                                    </div>
                                </div>
                            </div>
                        </div>
                        <button class="layui-btn layui-btn-danger layui-btn-fluid" id="finishBtn" style="margin-top: 15px;">
                            <i class="fa fa-flag-checkered"></i> 结束考试
                        </button>
                    </div>
                </div>
            </div>

            <!-- 右侧答题区 -->
            <div class="layui-col-md9">
                <div class="layui-card">
                    <div class="layui-card-header">
                        <span>请选择正确的选项</span>
                        <span class="layui-badge layui-bg-orange" style="float: right;">
                            <i class="fa fa-clock-o"></i> 倒计时：<span id="timer">119</span>分钟
                        </span>
                    </div>
                    <div class="layui-card-body">
                        <div class="question-content">
                            <p style="font-size: 16px; margin-bottom: 20px;">
                                <span class="layui-badge">1</span>
                                数据库系统的核心组成部分是什么？
                            </p>

                            <div class="layui-form">
                                <div class="layui-form-item">
                                    <input type="radio" name="answer" value="A" title="A. 数据库管理系统" checked>
                                </div>
                                <div class="layui-form-item">
                                    <input type="radio" name="answer" value="B" title="B. 数据库">
                                </div>
                                <div class="layui-form-item">
                                    <input type="radio" name="answer" value="C" title="C. 数据库管理员">
                                </div>
                                <div class="layui-form-item">
                                    <input type="radio" name="answer" value="D" title="D. 数据库应用系统">
                                </div>
                            </div>

                            <div class="layui-collapse" style="margin-top: 20px;">
                                <div class="layui-colla-item">
                                    <h2 class="layui-colla-title">题目解析</h2>
                                    <div class="layui-colla-content">
                                        <p>数据库管理系统（DBMS）是数据库系统的核心组成部分，它负责数据库的建立、使用和维护。</p>
                                        <div style="margin-top: 10px;">
                                            <span class="layui-badge layui-bg-green">正确答案：</span>
                                            <span class="layui-badge layui-bg-blue">A. 数据库管理系统</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="layui-card-footer" style="text-align: center;">
                        <button class="layui-btn layui-btn-primary" id="prevBtn"><i class="fa fa-arrow-left"></i> 上一题</button>
                        <button class="layui-btn" id="markBtn"><i class="fa fa-bookmark"></i> 标记</button>
                        <button class="layui-btn layui-btn-primary" id="nextBtn">下一题 <i class="fa fa-arrow-right"></i></button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 使用与参考文件一致的JS引用方式 -->
<script src="../../lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<script src="../../js/lay-config.js?v=1.0.4" charset="utf-8"></script>
<script>
    layui.use(['layer', 'form', 'element'], function(){
        var layer = layui.layer
            , form = layui.form
            , element = layui.element;

        // 左侧面板切换
        $('#toggleBtn').on('click', function(){
            $('#leftPanel').toggleClass('layui-hide-xs');
        });

        // 标记题目
        $('#markBtn').on('click', function(){
            layer.msg('题目已标记', {icon: 1, time: 1000});
        });

        // 结束考试
        $('#finishBtn').on('click', function(){
            layer.confirm('考试结束时间未到,是否提前交卷？', {
                icon: 3,
                title: '友情提示',
                btn: ['立即交卷', '再检查一下']
            }, function(){
                layer.msg('试卷提交中...', {icon: 16, time: 1500});
                // 模拟提交
                setTimeout(() => {
                    layer.msg('交卷成功！', {icon: 1, time: 2000});
                }, 1500);
            });
        });

        // 倒计时效果
        var time = 119;
        var timer = setInterval(function(){
            if(time > 0){
                time--;
                $('#timer').text(time);

                // 最后10分钟提醒
                if(time === 10){
                    layer.msg('考生注意,考试时间还剩10分钟！！！', {icon: 0, time: 5000});
                }
            } else {
                clearInterval(timer);
                layer.msg('考试时间到，系统自动提交试卷', {icon: 2});
                // 自动提交逻辑...
            }
        }, 60000);

        // 初始化表单元素
        form.render();
        element.render();
    });
</script>
</body>
</html>